<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="../../css/api1.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style1.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/jquery.mobile-1.4.5.css"/>
    <style>
        header{ background-color: #f2f2f2; }
        header ul li { height: 50px; line-height: 50px; text-align: center; display: none; color: #323237; position: relative;font-size: 18px;  }
        header ul li.active{ display: block; }
        .flex-con{
          overflow: scroll;
        }
        .fixed_bottom {
           position:fixed;
           left:0px;
           bottom:0px;
           width:100%;
           height:50px;
           z-index:10;
        }


        .title {
          /*border: 1px solid red;*/
          position: relative;
          width: 100%;
          height: auto;
          bottom: auto;
          padding-top: 10px;
          padding-right: 24px;
          box-sizing: border-box;
          font-size: 18px; color: #000000; text-align: left;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .tag {
          /*border-bottom: 1px solid #d3d2d2;*/
          /*border: 1px solid blue;*/
          position: relative;
          width: 100%;
          height: 12px;
          bottom: auto;
          padding-top: 10px;
          box-sizing: border-box;
          color: #917dcf; text-align: left;
        }
        .description {
          /*border: 1px solid blue;*/
          width: 100%;
          height: auto;
          font-size: 16px; color: #8e8e8e; text-align: left;
          padding-top: 20px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .interactive-box {
          width: 100%;
          height: 20px;
          padding-top: 10px;
        }
        .approve-logo {
          width: 64px;
          height: 21.5px;
          float: left;
          background-image: url(../../icon/approve.png);
          background-size: 15px 15px;
          background-position: left center;
          background-repeat: no-repeat;
          text-align: center;
          line-height: 21.5px;
          float: left;
        }
        .comment-logo {
          width: 64px;
          height: 21.5px;
          float: left;
          background-image: url(../../icon/message.png);
          background-size: 15px 15px;
          background-position: left center;
          background-repeat: no-repeat;
          text-align: center;
          line-height: 21.5px;
          float: left;
        }
        .more-logo {
          width: 32px;
          height: 16.5px;
          margin-right: 10px;
          float: left;
          background-image: url(../../icon/more1.png);
          background-size: 24px 5px;
          background-position: left center;
          background-repeat: no-repeat;
          text-align: center;
          float: right;
        }

        .guide {
          position: fixed;
          width: 100%;
          height: 32px;
          border-bottom: 1px solid #d3d2d2;
          background-color: #fff;
          z-index:10;

        }
        .guide-box {
          position: relative;
          width: 100%;
          height: 32px;
          background-color: #ffffff;
        }

        .content {
          width: 100%;
          height: auto;
          padding-top: 15px;
        }

        .content-box {
          position: relative;
          width: 90%;
          height: auto;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 15px;
        }


    </style>
</head>
<body>

  <section class="aui-content-padded" style="float: left">
    <div class="aui-card-list">
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
        现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>
      <div class="content-box">
        <div id = "title" class="title"  onclick="">
          现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？现在的年轻人吃不了苦吗？
        </div>
        <div id="tag"  class="tag"  onclick="">
          摄影 · 旅游 · 体验
        </div>
        <div class="description"  onclick="">
          当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，当代社会中层年轻人刚好是计划生育赶上的一代，家中大人溺爱至极，
        </div>
        <div class="interactive-box">
          <img src="../circle/image/aui-icon.png" style="height: 20px;width: 20px; border-radius: 50%; float: left">
          <div style="margin-top: 3px; margin-left: 3px;    float: left;font-size: small;" id="writer_name">大傻喵的-春天</div>
          <a class="aui-iconfont aui-icon-more" id="more-logo" style="float: right;font-size: medium"></a>
          <div data-role="popup"  id="myPop" data-arrow="b" style="">
            <p id="jubao" class="ui-content" style="padding:0px"></p>
          </div>
        </div>
      </div>

      </div>

  </section>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript">
  apiready= function () {

      $("#more-logo").click(function(){
          $('#jubao').text('举报')
      })
    $('.content-box').click(function () {
        api.openWin({
            name:'question_detail_',
            url:'answer_list.html',
            pageParam: {
                question_id: 1,
                answer_id: 1,
                user_id: 'e3b3dc8d20b7052f5c0799f3aa4e9f3e',
                type:"question"
            }
        })
    })
}

</script>
